<template>
  <div class="home">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <h1>后台管理系统</h1>
      <el-form-item label prop="pass">
        <el-input type="username" v-model="ruleForm.pass" autocomplete="off" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item label prop="checkPass">
        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
          v-loading.fullscreen.lock="fullscreenLoading"
        >登录</el-button>
        <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { http } from "../network/index";
export default {
  name: "Home",
  components: {},
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        pass: "",
        checkPass: "",
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
      fullscreenLoading: false,
    };
  },
  mounted() {

  },
  methods: {
    //点击登录
    submitForm(formName) {
      if (this.ruleForm.pass == "" || this.ruleForm.checkPass == "") {
        this.$message({
          message: '用户名或密码不能为空',
          type: "warning",
        });
        return
      }
      http
        .login({
          username: this.ruleForm.pass,
          password: this.ruleForm.checkPass,
        })
        .then((res) => {
          console.log(res.data.data);
          console.log(res.data.meta);
          //判断 返回的状态码
          if (res.data.meta.status === 400) {
            this.$message({
              message: res.data.meta.msg,
              type: "warning",
            });
          } else {
            this.$message({
              message: res.data.meta.msg,
              type: "success",
            });
            this.fullscreenLoading = true;
            setTimeout(() => {
              this.fullscreenLoading = false;
              this.$router.push("/about");
              localStorage.adminToken=res.data.data.token
            }, 600);
          }
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>



<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100vh;
  background-image: url("../../public/img/background.jpg");
  background-size: 100%;
  // background-repeat: no-repeat;
  display: flex;
  align-items: center; /*垂直居中*/
  justify-content: center; //*水平居中
}
@media screen and (max-width: 500px) {
  .home {
    background-image: url("../../public/img/b2.jpg");
  }
}
h1 {
  text-align: center;
  color: #ffffff;
  font-family: "华文行楷";
  text-shadow: 5px 5px 5px #000000;
  font-size: 3vw;
}
.el-form {
  width: 30%;
  background: rgba(0, 0, 0, 0.1);
  padding: 20px;
  // margin: 0 auto;
  border-radius: 20px;
  /deep/ .el-form-item__content {
    margin: 0 auto !important;
    width: 70%;
    margin: 0 auto;
    margin-top: 20px !important;
  }
  /deep/ .el-form-item {
    margin-bottom: 0 !important;
  }
  .el-button {
    width: 100%;
    background: rgba(241, 241, 241, 0.1) !important;
  }
}
</style>